﻿<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="format-detection" content="telephone=no" />
  <title>编辑信息</title>
  <link rel="stylesheet" type="text/css" href="../plugins/weui/css/weui.min.css">
  <link rel="stylesheet" type="text/css" href="../css/base.css">
  <link rel="stylesheet" type="text/css" href="../css/css.css">
  <link rel="stylesheet" href="../plugins/citySelect/css/LArea.css">
</head>

<style type="text/css">
 body{background-color:#F3F3F3;width:100%;height:100vh;overflow-x:hidden}
.number{padding-top:10px;padding-bottom:10px}
.number input{height:30px;border:none}
.choose_country{border:1px solid #666;padding:2px 15px;margin-right:15px;color:#666}
.choose_active{border:1px solid #FE7B03;color:#FE7B03}
.color_h{color:#666}
#selectdate{border:none}
.save_btn{border-radius:5px;color:#fff;margin-top:25px;margin-bottom:25px;width:80%;margin-left:auto;margin-right:auto;background-color:#FE7B03;border:none}
.hide{display:none}
</style>

<body>
  <div class="container">
    <div class="weui-cells" style="margin-top:0;">
      <a class="weui-cell weui-cell_access" href="javascript:;">
        <div class="weui-cell__hd"><img src="../images/avater_def.png" class="avater" style="width:90px;height: 90px; margin-right:5px;display:block"></div>
        <div class="weui-cell__bd">
        </div>     
          <form id="myform" class="logo">
            <div class="weui-cell__ft" id="uploader">
              修改头像
              <input id="uploaderInput" class="weui-uploader__input" type="file" name="cover" />
            </div>
              <div class="js_showBox"></div>
          </form>

      </a>
      <input type="hidden" id="regionid" />
      <input type="hidden" id="hidAvater" />
    </div>
  </div>
  <div class="weui-cells weui-cells_form">
    <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
      <div class="weui-cell__bd">
        <input class="weui-input color_h name" type="text" disabled="disabled" placeholder="请输入姓名" />
      </div>
    </div>
    <div class="weui-cell weui-cell_select weui-cell_select-after number">
      <div class="weui-cell__hd">
        <label for="" pattern="[0-40]*" class="weui-label">手机号</label>
      </div>
      <div class="weui-cell__bd">
        <input type="text" class="mobile" placeholder="请输入手机号">
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">职位</label></div>
      <div class="weui-cell__bd">
        <input class="weui-input color_h position" type="text" disabled="disabled" value="经理" placeholder="请输入职位" />
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">公司</label></div>
      <div class="weui-cell__bd">
        <input class="weui-input color_h company" type="text" disabled="disabled" placeholder="请输入公司名称" />
      </div>
    </div>
  </div>
  <div class="weui-cells weui-cells_form">
    <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">微信</label></div>
      <div class="weui-cell__bd">
        <input class="weui-input wxid" type="text" placeholder="请输入微信号" />
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">座机</label></div>
      <div class="weui-cell__bd">
        <input class="weui-input phone" type="text" placeholder="请输入座机" />
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">邮箱</label></div>
      <div class="weui-cell__bd">
        <input class="weui-input email" type="text" placeholder="请输入邮箱" />
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">国家</label></div>
      <div class="weui-cell__bd">
        <span class="choose_country" id="country1" data-index="0">国内</span><span class="choose_country" id="country2" data-index="1">国外</span>
      </div>
    </div>
    <div class="weui-cell  weui-cell_select-after box-address hide">
      <div class="weui-cell__hd">
        <label for="" class="weui-label">地区选择</label>
      </div>
      <div class="weui-cell__bd box-address hide">
        <input id="selectdate" type="text" readonly placeholder="请选择地区" value="" />
        <!--选择的地区-->
        <input id="hidRegionId" type="hidden" value="" />
	  	<input id="hidRegionName" type="hidden" value="" />
      </div>
    </div>
    <div class="weui-cell box-address hide">
      <div class="weui-cell__hd">
        <label for="" class="weui-label">详细地址</label>
      </div>
      <div class="weui-cell__bd">
        <textarea class="weui-textarea address" placeholder="请输入详细地址" rows="1"></textarea>
      </div>
    </div>
  </div>
  <div class="button-sp-area save_btn">
    <a href="javascript:;" class="weui-btn btn-submit">保存</a>
  </div>
</body>



<script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../js/jquery-form.js"></script>
<script type="text/javascript" src="../js/jquery.uploadView.js"></script>
<script type="text/javascript" src="../js/base.js"></script>
<script src="../plugins/citySelect/js/LAreaData1.js"></script>
<script src="../plugins/citySelect/js/LArea.js"></script>
<script src="../js/my.js"></script>
<script type="text/javascript">
  //地区选择
  var area1 = new LArea();
  $(function() {
    loadArea();
    loadStaff();
    loadBtn();
    loadFile();
    loadUp();
  });

  function loadFile() {
      $("#uploaderInput").uploadView({
          uploadBox: '#uploader',//设置上传框容器
          showBox: '.js_showBox',//设置显示预览图片的容器
          width: 50, //预览图片的宽度，单位px
          height: 50, //预览图片的高度，单位px
          allowType: ["gif", "jpeg", "jpg", "bmp", "png"], //允许上传图片的类型
          maxSize: 3, //允许上传图片的最大尺寸，单位M
          success: function (e) {
              //选择好文件后提交表单
              $("#myform").ajaxSubmit({
                  type: 'post',
                  dataType: "json",
                  url: siteApiList.UploadAvater,
                  success: function (data) {
                      $("#hidAvater").val(data.Data)
                  },
                  error: function (XmlHttpRequest, textStatus, errorThrown) {
                      Alert('图片上传失败');
                  }
              });
          }
      });
  }

  function loadArea() {
    area1.init({
      'trigger': '#selectdate', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
      'valueTo': '#hidRegionId', //选择完毕后id属性输出到该位置
      'keys': {
        id: 'id',
        name: 'name'
      }, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
      'type': 1, //数据源类型
      'data': LAreaData //数据源
    });
    area1.value = [1, 13, 3]; //控制初始位置，注意：该方法并不会影响到input的value
  }

  var flag = true;
  function phone() {
      var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
      var phoone = $('.mobile').val();
      if (phoone == "") {
          Alert("手机号不能为空");
          return false;
      } else if (!myreg.test(phoone)) {
          Alert("手机格式不对，请重新输入");
          $(".mobile").focus();
          return false;
      } else { return true; }
  }
  
  function email() {
      var email = $('.email').val();
      if (email == "") {
          Alert("邮箱不能为空");
          return false;
      }else if (!email.match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/)) {
          Alert("邮箱格式不正确！请重新输入");
          $(".email1").focus();
          return false;
      } else {
           return true;
      }
  }
  //验证手机号
  $('.mobile').blur(function () {
      phone();
  })
  //验证邮箱
  $('.email').blur(function () {
      email();
  })

  function loadBtn() {
    $(".choose_country").click(function() {
      showAddress($(this).attr("data-index"));
    });

    $(".btn-submit").click(function () {
        email();
        phone();
        if (phone()==true&&email()==true) {
            updateStaff();
        }
        
    })

    $('body').on('click', '.larea_finish', function () {
        console.log($(this))
    });
  }

  function loadUp() {
    $("input[type='file']").change(function() {
      var file = this.files[0];
      if (window.FileReader) {
        var reader = new FileReader();
        reader.readAsDataURL(file);
        //监听文件读取结束后事件
        reader.onloadend = function(e) {
          $(".avater").attr("src", e.target.result); //e.target.result就是最后的路径地址
        };
      }
    });
  };

</script>

</html>
